<template>
  <view class="m-position">
    <view class="postName">
      <view class="bl"></view>{{ detail.bangbType }}
   <!--   <text class="status inprogress">状态:</text> -->
	  <text v-if="detail.state==1" class="status inprogress">进行中</text>
	 <text v-else-if="detail.state==2" class="status inprogress">已完成 </text>
	 <text v-else-if="detail.state==3" class="status inprogress">已取消</text>
    </view>
    <view class="info-box dev-box">
      <view class="mark">基本信息</view>
      <view class="right">
        <text class="right">{{ detail.money }}星币</text>
      </view>
	
      <view class="info-item" style="padding-top: 90upx">
        <text class="t">帮帮类型：</text>
		
		  <uni-tag  type="warning" :text="detail.mode" />
      </view>
	  <view class="info-item">
	    <text class="t">帮帮状态：</text>
		  <uni-tag  v-if="item.urgent == 0" :inverted="true"  type="success" text=" 正常" />
		 <uni-tag  v-else="item.urgent == 0" :inverted="true"  type="error" text=" 加急" />
	  </view>
    <view class="info-item">
      <text class="t" style="font-weight: bold;">帮帮标题：</text>{{detail.title}}
	
    </view>
 <!--     <view class="info-item">
        <text class="t">需求备注：</text>{{ detail.describes }}
      </view> -->
      <view class="info-item">
        <text class="t">发布人号码：</text>{{ detail.mobile }}
		<button @click.stop="phone(detail.mobile)"  type="default"  style="font-size: 8px; "  class="left30"  size="mini">点击拨打</button>
		
      </view>
      <view class="info-item">
        <text class="t">发布人微信：</text>{{ detail.wx }}
			<button @click.stop="copyText(detail.wx)"  type="default"  style="font-size: 8px; "  class="left30"    size="mini">复制</button>
      </view>
      <view class="info-item">
        <text class="t">帮帮发布时间：</text
        >{{ detail.createTime }}
      </view>
	  <view class="info-item">
	    <text class="t">订单结束时间：</text>{{ detail.endTime }}
	  </view>
      <view class="info-item">
        <text class="t">帮帮截止时间：</text>{{ detail.endTime1 }}
      </view>
	  
	  <view v-if="detail.state==3" class="info-item">
	    <text class="t">订单取消时间：</text>{{ detail.canceltime }}
	  </view>
	   <view class="info-item">
	  <view class="text" style="text-align-last: left; text-align: left"
	    >帮帮备注:</view
	  >
	  
       <textarea
            v-model="detail.describes"
            type="text"
            maxlength="300"
            name="describes"
			style="height: 240upx;"
          ></textarea>
		  <view class="testClass" style="text-align-last: left; text-align: left"
		    >注意事项:为了您的财产安全，请勿私下交易，私下交易平台不保证财产安全。
			
			</view>
			<text class="testClass1" > 注：接单30分钟内可无责取消订单。</text>
 </view>
      <hr />
    </view>
  <view class="btn-box">
      <button class="enroll-btn" @click="enrollerSave(detail.id)">
        取消订单
      </button>
    </view>
  </view>
</template>

<script>

import { mapState, mapMutations, mapGetters } from 'vuex';
import { formatDate } from '@/common/date';
import config from '@/config/index.config.js';
export default {
  components: {},
  computed: {
    ...mapState(['userInfo']),
    ...mapGetters(['hasLogin']),
  },
  data() {
    return {
      id: '',
      isCollect: false,
      istimeMoney: 0,
      isSecondCollect: false,
      detailInfo: {
        workType: '',
        num: '',
        describe: '',
        timeMoney: '',
        title: '',
        status: '',
        startTime: '',
        endTime: '',
        wayModel: '',
        endUserTime: '',
        province: '',
        city: '',
        distinguish: '',
      },
      volley: false,
      detail: {},
    };
  },
  onLoad(query) {
    if (query.id) {
      this.id = query.id;
    }
    if (query.pcode) {
      uni.setStorageSync('pcode', query.pcode);
    }
  },
  //发送给朋友
  onShareAppMessage(res) {
    let that = this;
    if (!this.hasLogin) {
      uni.showToast({
        title: '请先登录，再分享',
        icon: 'none',
      });
      return false;
    }
    return {
      title: that.detailInfo.title + ',火热招聘中，赶紧来看看吧！',
      path:
        '/pages/position/detail?id=' +
        that.id +
        '&pcode=' +
        that.userInfo.pcode,
      imageUrl:
        'https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/banner/%E7%94%BB%E6%9D%BF%203.png',
      success(res) {
        console.log('success(res)==', res);
        uni.showToast({
          title: '分享成功',
        });
      },
      fail(res) {
        console.log('fail(res)==', res);
        uni.showToast({
          title: '分享失败',
          icon: 'none',
        });
      },
    };
  },
  //分享到朋友圈
  onShareTimeline(res) {
    let that = this;
    return {
      title: '找兼职/找工作，海量岗位放心选',
      path: '/pages/index/index?pcode=' + that.userInfo.pcode,
      imageUrl:
        'https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/banner/%E7%94%BB%E6%9D%BF%203.png',
      success(res) {
        console.log('success(res)==', res);
        uni.showToast({
          title: '分享成功',
        });
      },
      fail(res) {
        console.log('fail(res)==', res);
        uni.showToast({
          title: '分享失败',
          icon: 'none',
        });
      },
    };
  },
  onShow() {
    this.getDetail(this.id);
  },
  methods: {
	  copyText(e) {
	  		  console.log("复制的内容"+e);
	        const textToCopy = e;
	        uni.setClipboardData({
	          data: textToCopy,
	          success() {
	            uni.showToast({
	              title: '已复制',
	              icon: 'success'
	            });
	          }
	        });
	  			},
	 phone (phone){
		  uni.makePhoneCall({
		    phoneNumber: phone,
		    success: function () {
		      console.log('拨打电话成功！');
		    },
		    fail: function () {
		      console.error('拨打电话失败！');
		    }
		  });
	  },
    /**
     * 查询职位详情
     */
    async getDetail(id) {
      uni.showLoading({
        title: '加载中...',
        mask: true,
      });
      let res = await this.$apis.orderDetail({ id: id });
      this.detail = res;
      uni.hideLoading();
    },


    formatCreateTime(time) {
      if (time == null || time === '') {
        return '未知';
      }
      let str = time.replace(/-/g, '/');
      let date = new Date(str);
      return formatDate(date, 'yyyy.MM.dd');
    },
    async enrollerSave(ids) {
		const prnd=this;
		const id=ids;
			wx.showModal({
				content:"是否确认取消？保证金将原路退回",
				placeholderText:"111",
				success(res) {
					  if (res.confirm) {
						  console.log("用户点击了确认，保证金退回接口调用")
						  prnd.$apis.payWxToOrderReturn({id:id}).then((req)=>{
							  
							  if(req){
								  uni.showModal({
								  	title:"提示",
									content:"取消成功，保证金将原路返回！"
								  })
								  uni.navigateBack({
								   delta: 1
								  																
								  });
							  }
							  
						  });
						  
						  
						  }else if (res.cancel) {
							  content:"用户点击了取消",
		                // 用户点击了取消按钮，可以不做任何操作，或者给出提示
						setTimeout(() => {
						  uni.navigateBack();
						}, 3000);
		            }
				}
			})
      
    },
    collect(isC) {
      if (this.volley) {
        uni.showToast({ title: '请勿频繁操作！', icon: 'error' });
        return;
      }
      if (isC) {
        let res = this.$apis.postCollect({ id: this.id });
        if (res) {
          uni.showToast({ title: '收藏成功', icon: 'success' });
        } else {
          uni.showToast({ title: '处理异常', icon: 'error' });
        }
      } else {
        let res = this.$apis.postCollectCancel({ id: this.id });
        if (res) {
          uni.showToast({ title: '取消成功', icon: 'success' });
        } else {
          uni.showToast({ title: '处理异常', icon: 'error' });
        }
      }
      this.volley = true;
      setTimeout(() => {
        this.volley = false;
      }, 3000);
      this.isCollect = isC;
    },
  },
};
</script>

<style lang="scss" scoped>
.m-position {
  padding-bottom: 150upx;
  .postName {
    margin: 20upx 4% 20upx 4%;
    font-weight: bold;
    font-size: $font-size-34;
    line-height: 50upx;
    .bl {
      border-radius: 6upx;
      float: left;
      margin-right: 20upx;
      background-color: #36b957;
      margin-top: 5upx;
      height: 40upx;
      width: 10upx;
    }
  }
  .mark {
    color: white;
    line-height: 50upx;
    width: 140upx;
    text-align: center;
    float: left;
  }
  .info-box {
    background-image: url(https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/img/label1.png);
    background-size: 220upx 80upx;
    background-repeat: no-repeat;
    background-color: $bgcolor_white;
    padding: 0upx 30upx 30upx 30upx;
    // margin-bottom: 20upx;
    .info-item {
      line-height: 60upx;
      color: #666;
	  .left30{
		  transform: translateX(130px);
		  
	  }
	  .bold{
	  		  font-weight: bold;
	  }
	  .testClass{
		  font-weight: bold;
	  }
	  .testClass1{
	  		  font-weight: bold;
	  		  font-size: 35upx;
	  }
    }
    .right {
      color: #36b957;
      font-weight: bold;
      line-height: 65upx;
      float: right;
    }
  }
  .info-bttom {
    display: flex;
    text-align: center;
    line-height: 60upx;
    .deadline {
      flex: 1;
    }
    .surplus {
      flex: 1;
    }
  }
}
.t {
  color: black;
  font-weight: bold;
}

.label {
  padding: 30upx 0upx;
  border-top: 4upx dashed #ccc;
  height: 40upx;
  width: 100%;
  margin-top: 20upx;
  .title-parttime {
    color: #66666e;
    border: 1upx solid #36b957;
    background-color: #f5ffe6;
    font-size: $uni-font-size-sm;
    margin-right: 15upx;
    padding: 4upx 15upx;
    border-radius: 6upx;
    line-height: 40upx;
    float: left;
  }
}
.title {
  margin-top: 10upx;
  .title-name {
    font-weight: bold;
    font-size: $uni-font-size-lg;
  }
}
.btn-box {
  position: fixed;
  bottom: 0px;
  display: flex;
  align-items: center;
  width: 92%;
  padding: 30upx 4% 30upx 4%;
  background-color: white;
  .apprise {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .collect {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .enroll-btn {
    flex: 3;
    background-color: #36b957;
    color: white;
    border-radius: 45upx;
  }
}
.fx {
  flex: 1;
  font-size: 35upx;
  line-height: 35upx;
}
.status {
  margin-left: 30upx;
  padding: 10upx 14upx;
  font-size: 24upx;
  border-radius: 30upx;
}
.inprogress {
  border: 1upx solid #36b957;
  background-color: #e1f3c7;
}
.end {
  border: 1px solid #b93636;
  background-color: #f3c7c7;
}
.iconfont {
  margin-right: 10upx;
  font-size: 35upx;
}
</style>
